<template>
  <div
      class="window_prompt_box"
      :style="{'background-color':promptBoxColor}"
      v-if="promptBoxShow">{{promptBoxInfo}}</div>
  <div class="ModifyAddressWindow" v-if="windowShow">
    <div class="ModifyAddressTitle">
      <a class="WindowClose" title="关闭" @click="close">×</a>
      <div class="title">
        <text>{{modifyType==0?"修改地址":"新增地址"}}</text>
      </div>
    </div>
    <div class="ModifyAddressBody">
      <textarea class="text" maxlength="100" v-model="textVal"></textarea>
    </div>
    <el-button type="primary" @click="submit" class="submitBtn">提交</el-button>
  </div>
  <el-button type="primary" class="create_new" @click="createAddress">新增</el-button>
  <el-table :data="tableData" style="width: 90%" class="table">
    <el-table-column label="序号" width="90">
      <template #default="scope0">
        <div>{{scope0.$index+current_page*10-9}}</div>
      </template>
    </el-table-column>
    <el-table-column prop="address" label="我的收货地址" width="900" />
    <el-table-column  label="操作">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="Modify(scope.row)">修改</el-button>
        <el-button link type="primary" size="small" @click="Delete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <SplitPage :total_number="number" :page_size="10" @onPageChange="PageChange" class="splitBtn"/>
</template>

<script>
import SplitPage from "@/components/Personal/SplitPage";
export default {
  name: "Address",
  components: {
    SplitPage
  },
  data() {
    return{
      current_page:1,
      number:0,
      tableData:[],
      allData:[],
      windowShow:false,
      textVal:"",
      currentAddressID:0,
      currentUserID:0,
      modifyType:0,//0表示当前修改地址,1表示当前新增地址
      promptBoxInfo:"",
      promptBoxColor:'',
      promptBoxShow:false,
      user:{}
    }
  },
  methods: {
    Delete(row){
      this.$axios
          .delete(`${this.$target}/address/delete/`+row.address_id)
          .then(res => {
            this.showSuccess("删除地址成功!")
            this.initTable()
          })
    },
    Modify(row){
      this.textVal=row.address
      this.currentAddressID=row.address_id
      this.currentUserID=row.user_id
      this.modifyType=0
      this.show()
    },
    submit() {
      if(this.modifyType==0){
        var params = {
          'user_id':this.currentUserID,
          'address_id':this.currentAddressID,
          'address':this.textVal
        }
        this.close()
        this.$axios
            .put(`${this.$target}/address/update`, JSON.stringify(params),{
              headers: {
                'Content-Type': 'application/json;charset=UTF-8'
              }
            })
            .then(res => {
              this.showSuccess("修改地址成功!")
              this.initTable()
            })
      }else if(this.modifyType==1){
        this.close()
        this.$axios
            .post(`${this.$target}/address/save?id=`+this.user.id+`&&address=`+this.textVal, {
              headers: {
                'Content-Type': 'application/json;charset=UTF-8'
              }
            })
            .then(res => {
              this.showSuccess("添加地址成功!")
              this.initTable()
            })
      }
    },
    createAddress(){
      this.modifyType=1
      this.textVal=""
      this.show()
    },
    PageChange(newPage){
      this.current_page=newPage
      this.tableData=this.allData.slice(newPage*10-10,newPage*10>this.allData.length?this.allData.length:newPage*10)
    },
    show(){
      this.windowShow=true
      this.$emit("onShowShelter")
    },
    close(){
      this.windowShow=false
      this.$emit("onCloseShelter")
    },
    initTable(){
      this.$axios
          .get(`${this.$target}/address/`+this.user.id)
          .then(res=>{
            this.allData=res.data.data
            this.number=this.allData.length
            if(this.number!=0) {
              if(this.number<=this.current_page*10-10){//一页被删完时
                this.current_page-=1
              }
              this.tableData = this.allData.slice(this.current_page * 10 - 10, this.current_page * 10 > this.allData.length ? this.allData.length : this.current_page * 10)
            }else{//全部被删完
              this.tableData=[]
            }
            })
    },
    showSuccess(text){
      this.promptBoxInfo=text
      this.promptBoxColor='#45cb45'
      this.promptBoxShow=true
      setTimeout(()=>{//用箭头函数保证this指向vue实例
        this.promptBoxShow=false
      }, 1000)
    },
    showError(text){
      this.promptBoxInfo=text
      this.promptBoxColor='#e12a2a'
      this.promptBoxShow=true
      setTimeout(()=>{
        this.promptBoxShow=false
      }, 1000)
    }
  },
  mounted() {
    this.user=JSON.parse(localStorage.getItem("user"))
    this.initTable()
  }
}
</script>

<style scoped>
.create_new {
  position: relative;
  left: 40%;
  top: 40px;
}
.table {
  position: relative;
  left: 60px;
  margin-top: 50px;
}
.splitBtn {
  position: relative;
  left:78%;
  margin-top: 70px;
  width: fit-content;
}
.ModifyAddressWindow {
  z-index: 9999;
  position: fixed;
  top: 45%;
  left: 63%;
  width: 400px;
  height:280px;
  margin: -180px 0 0 -330px;
  border: solid 2px black;
  box-shadow: 0 0 1px black;
  background-color: white;
  padding-top: 5px;
  border-radius: 6px;
}
.WindowClose {
  position: absolute;
  left: 410px;
  top: -8px;
  color: #000000;
  font: bold 24px simsun;
  text-shadow: 0 1px 0 #ddd;
  cursor:pointer;
}
.ModifyAddressTitle {
  width: 100%;
  height: 45px;
  border-bottom: 1px solid black;
}
.ModifyAddressTitle text {
  font-size: 28px;
  margin-top: 25px;
}
.ModifyAddressBody {
  width: 100%;
  height: 195px;
}
.text {
  resize: none;
  border: none;
  width: 100%;
  height: 99%;
  font-size: 24px;
  outline: none;
  border-radius: 0 0 6px 6px;
}
.submitBtn {
  position: relative;
  margin-top: 50px;
  width: 100px;
  height: 40px;
  font-size: 20px;
}
.window_prompt_box {
  position: absolute;
  color: white;
  top: 40px;
  left: 45%;
  width: 300px;
  height: 40px;
  border-radius: 10px;
  z-index: 9999;
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  padding-top: 4px;
}
</style>